<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            border: 1px solid;
        }

        #box {
            width: 200px;
            height: 200px;
            border: 1px solid;
            position: fixed;
            bottom: 0;
        }

        .box {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: pink;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
        }

        .dropdown {
            margin-top: 100px;
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
        }

        .bg {
            background-color: skyblue;
        }

        p,
        span {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table></table>
    <div id="box">流氓广告<div class="box">X</div>
    </div>
    <div class="dropdown">
        <span>菜单</span>
        <div class="dropdown-content">
            <p>罪恶王冠</p>
            <p>鬼灭之刃</p>
            <p>海贼王</p>
            <p>小林家的龙女仆</p>
        </div>
    </div>

    <script>
        //1.在页面上根据数据，动态创建表格
        //2.根据数据创建表格实现隔行变色功能

        let arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男',
                birthday: '2000-1-1'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女',
                birthday: '2000-1-1'
            }, {
                name: 'Top',
                age: 22,
                gender: '男',
                birthday: '2000-1-1'
            }
        ]
        let table = document.querySelector('table');
        arr.forEach((v, index) => {
            if (index == 0) {
                let tr = document.createElement('tr');
                tr.style.backgroundColor = 'pink';
                table.appendChild(tr);
                for (const key in v) {
                    let td = document.createElement('td');
                    tr.appendChild(td).innerHTML = key;
                }
            }
            let tr = document.createElement('tr');
            if (index % 2)
                tr.style.backgroundColor = 'pink';
            table.appendChild(tr);
            for (const key in v) {
                let td = document.createElement('td');
                tr.appendChild(td).innerHTML = v[key];
            }
        });
        

        // ​3 实现流氓广告的关闭
        document.querySelector('.box').onclick = () => {
            document.querySelector('#box').style.display = 'none';
            setTimeout(() => {
                document.querySelector('#box').style.display = 'block';
            }, 4000);
        }

        // 4.下拉菜单
        let span = document.querySelector('span');
        let dropdown = document.querySelector('.dropdown-content');
        let arrP = document.querySelectorAll('p')
        span.onclick = () => {
            dropdown.style.display = 'block';
        }
        arrP.forEach(v => {
            v.onclick = () => {
                span.innerHTML = v.innerText;
                dropdown.style.display = 'none';
            }
        });

    </script>
</body>

</html>